import React, {useRef, useState} from "react";
import {defaultPagination, paginationTool} from "@/utils/util";
import {useMount, useRequest} from "ahooks";

import ProTable from "@ant-design/pro-table";
import {Link} from "@umijs/preset-dumi/lib/theme";
import {PlusOutlined} from "@ant-design/icons";
import {getResult} from "@/services/ant-design-pro/attribute";
import {editVideo, findByPageList, findByVideoCategorySelectList} from "@/services/ant-design-pro/video";
import {FormInstance, ModalForm} from "@ant-design/pro-form";
import {Button, PageHeader, Upload} from "antd";
import FormModalBtn from "@/components/FormModalBtn";
import MyUpload from "@/components/MyUpload";
import {FormFieldType, ProFormColumnsType} from "@ant-design/pro-form/lib/components/SchemaForm/typing";



const VideoIndex :React.FC = () => {
  const formRef= useRef<FormInstance> ();
  const columnsForm:ProFormColumnsType<any,FormFieldType> = [
    {
      title: '视频编号',
      dataIndex: 'id',
      search: false,
     fieldProps:{
        hidden:true
     },
      formItemProps: {
        hidden: true
      }
    },
    {
      title: '视频名称',
      dataIndex: 'name',
      fieldProps: {
        required: true
      },
      formItemProps: {
        required: true
      }
    },
    {
      title: '视频维语名称',
      dataIndex: 'nameUg',
      fieldProps: {
        required: true
      },
      formItemProps: {
        required: true
      }
    },
    {
      title: '视频分类',
      dataIndex: 'categoryId',
      valueType: "select",request:findByVideoCategorySelectList,
      fieldProps: {
        required: true
      },
      formItemProps: {
        required: true
      }
    },
    {
      title: '视频图片',
      dataIndex: 'imageId',
      valueType: "upload",
      renderFormItem:()=>{
        // @ts-ignore
        return <MyUpload  type={1} onChange={(imageId:number) => {
          formRef.current?.setFieldValue ( "imageId", imageId );
          return imageId;
        }}/>
      },

    }
  ];
  const columns = [
    {
      title: '视频编号',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '视频图片',
      dataIndex: 'imageUrl',
      valueType: 'image',
      search: false,
    },
    {
      title: '视频名称',
      dataIndex: 'name',
    },
    {
      title: '视频分类',
      dataIndex: 'categoryName',
      search: false,
    },

    {
      title: '赞数',
      dataIndex: 'likeCount',
      search: false,
      valueType: 'tag',
    },
    {
      title: '显示计数',
      dataIndex: 'viewCount',
      search: false,
    },
    {
      title: '评价',
      dataIndex: 'rate',
      search: false,
      valueType: "rate",

      fieldProps: {
        count:10
      },

    },
    {
      title: '时间',
      dataIndex: 'createDate',
      valueType: 'dateTime',
      hideInSearch: true,
    },

    {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_: any, row: { name: string; id: any; }, index: any, action: any) => [
        <FormModalBtn onChange={refresh} request={editVideo} title={row?.name} formRef={formRef} initialValues={row} columns={columnsForm} btnText={"编辑"}/>
        ,
        <Link key="link" to={`/video/show?id=${row.id}&name=${row.name}`}>
          详细
        </Link>,
      ],
    },
  ];

  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByPageList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByPageList, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
    fetchByPageList ();
  } );

  return (
    <ProTable

      search={false}

      onDataSourceChange={(d) => {
        console.log ( 'onDataSourceChange', d );
      }}
      onLoad={(d) => {
        // 数据加载完操作
        console.log ( 'onDataSourceChange', d );
      }}
      toolBarRender={() => [
        <FormModalBtn onChange={refresh} request={editVideo} title={"添加"} formRef={formRef} initialValues={{id:0}} columns={columnsForm} btnText={"添加"}/>

      ]}
      dataSource={dataList?.data?.list}
      loading={loading}
      pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
        setPagination ( data1 );

        fetchByPageList ( {...data1} );
      } )}

      cardBordered={true}
      columns={columns}
    ></ProTable>
  );
}
export  default  VideoIndex;
